export default {
  data() {
    return {
      mix_tableData: [], // 需要渲染的数据
      mix_saveDATA: [], // 所有数据
      mix_tableRef: null, // 设置了滚动的那个盒子
      mix_tableWarp: null,
      vt_fixLeft: null,
      vt_fixRight: null,
      vt_tableFixedLeft: null,
      vt_tableFixedRight: null,
      vt_scrollTop: 0,
      vt_num: 0,
      vt_start: 0,
      vt_end: 90, // 3倍的pageList
      vt_starts: 0, // 备份[保持与上一样]
      vt_ends: 90, // 备份[保持与上一样]
      vt_pageList: 30, // 一屏显示
      vt_itemHeight: 32, // 每一行高度
      vt_timeOut: 200 // 延迟
    }
  },
  watch: {
    vt_num: function (newV) {
    // 因为初始化时已经添加了3屏的数据，所以只有当滚动到第3屏时才计算位移量
      if (newV > 1) {
        this.vt_start = (newV - 1) * this.vt_pageList
        this.vt_end = (newV + 2) * this.vt_pageList
        setTimeout(() => {
        // 计算偏移量
          this.mix_tableWarp.style.transform = `translateY(${this.vt_start *
            this.vt_itemHeight}px)`
          if (this.vt_fixLeft) {
            this.vt_fixLeft.style.transform = `translateY(${this.vt_start *
              this.vt_itemHeight}px)`
          }
          if (this.vt_fixRight) {
            this.vt_fixRight.style.transform = `translateY(${this.vt_start *
              this.vt_itemHeight}px)`
          }
          this.mix_tableData = this.mix_saveDATA.slice(this.vt_start, this.vt_end)
        }, this.vt_timeOut)
      } else {
        setTimeout(() => {
          this.mix_tableData = this.mix_saveDATA.slice(this.vt_starts, this.vt_ends)
          this.mix_tableWarp.style.transform = `translateY(0px)`
          if (this.vt_fixLeft) {
            this.vt_fixLeft.style.transform = `translateY(0px)`
          }
          if (this.vt_fixRight) {
            this.vt_fixRight.style.transform = `translateY(0px)`
          }
        }, this.vt_timeOut)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 设置了滚动的盒子
      if (this.$refs.tableRef) {
        this.mix_tableRef = this.$refs.tableRef.bodyWrapper
      }
      // 左侧固定列所在的盒子
      this.vt_tableFixedLeft = document.querySelector(
        '.el-table .el-table__fixed .el-table__fixed-body-wrapper'
      )
      // 右侧固定列所在的盒子
      this.vt_tableFixedRight = document.querySelector(
        '.el-table .el-table__fixed-right .el-table__fixed-body-wrapper'
      )
      /**
         * fixed-left | 主体 | fixed-right
         */
      // 主体改造
      // 创建内容盒子divWarpPar并且高度设置为所有数据所需要的总高度
      let divWarpPar = document.createElement('div')
      // 如果这里还没获取到saveDATA数据就渲染会导致内容盒子高度为0，可以通过监听saveDATA的长度后再设置一次高度
      divWarpPar.style.height = this.mix_saveDATA.length * this.vt_itemHeight + 'px'
      // 新创建的盒子divWarpChild
      let divWarpChild = document.createElement('div')
      divWarpChild.className = 'fix-warp'
      // 把divWarpChild添加到divWarpPar中，最把divWarpPar添加到tableRef中
      divWarpPar.append(divWarpChild)
      // 把tableRef的第一个子元素移动到新创建的盒子divWarpChild中
      if (this.mix_tableRef) {
        divWarpChild.append(this.mix_tableRef.children[0])
        this.mix_tableRef.append(divWarpPar)
      }
      // left改造
      let divLeftPar = document.createElement('div')
      divLeftPar.style.height = this.mix_saveDATA.length * this.vt_itemHeight + 'px'
      let divLeftChild = document.createElement('div')
      divLeftChild.className = 'fix-left'
      this.vt_tableFixedLeft &&
          divLeftChild.append(this.vt_tableFixedLeft.children[0])
      divLeftPar.append(divLeftChild)
      this.vt_tableFixedLeft && this.vt_tableFixedLeft.append(divLeftPar)

      // right改造
      let divRightPar = document.createElement('div')
      divRightPar.style.height = this.mix_saveDATA.length * this.vt_itemHeight + 'px'
      let divRightChild = document.createElement('div')
      divRightChild.className = 'fix-right'
      this.vt_tableFixedRight &&
          divRightChild.append(this.vt_tableFixedRight.children[0])
      divRightPar.append(divRightChild)
      this.vt_tableFixedRight && this.vt_tableFixedRight.append(divRightPar)

      // 被设置的transform元素
      this.mix_tableWarp = document.querySelector(
        '.el-table .el-table__body-wrapper .fix-warp'
      )
      this.vt_fixLeft = document.querySelector(
        '.el-table .el-table__fixed .el-table__fixed-body-wrapper .fix-left'
      )
      this.vt_fixRight = document.querySelector(
        '.el-table .el-table__fixed-right .el-table__fixed-body-wrapper .fix-right'
      )
      if (this.mix_tableRef && this.$refs.tableRef) {
        // console.log('===scroll====')
        this.mix_tableRef.addEventListener('scroll', this.onScroll)
      }
    }, 500)
  },
  methods: {
    vt_init(dataList) {
      this.vt_scrollTop = 0
      this.vt_num = 0
      this.vt_start = 0
      this.vt_end = 90
      this.vt_starts = 0
      this.vt_ends = 90
      this.mix_saveDATA = JSON.parse(JSON.stringify(dataList))
      // console.warn('mix_saveDATA', this.mix_saveDATA)
      this.mix_tableData = this.mix_saveDATA.slice(this.vt_start, this.vt_end)
      console.warn('mix_tableData.len_in_vt_init', this.mix_tableData.length)
      // console.log('this.mix_tableData', this.mix_tableData)
    },
    vt_refresh(dataList) {
      this.mix_saveDATA = JSON.parse(JSON.stringify(dataList))
      this.mix_tableData = this.mix_saveDATA.slice(this.vt_start, this.vt_end)
    },
    onScroll() {
      this.vt_scrollTop = this.mix_tableRef.scrollTop
      this.vt_num = Math.floor(this.vt_scrollTop / (this.vt_itemHeight * this.vt_pageList))
    }
    // changeListData(row, value, intValue) {
    //   console.log('into changeListData')
    //   console.log('this.mix_tableData.length', this.mix_tableData.length)
    //   for (let i = 0; i < this.mix_tableData.length; i++) {
    //     console.log('list.patientId', this.mix_tableData[i].patientId)
    //     console.log('row.patientId', row.patientId)
    //     if (this.mix_tableData[i].patientId === row.patientId) {
    //       this.mix_tableData[i].grade = value
    //       this.mix_tableData[i].emergencylabel = value
    //       this.mix_tableData[i].emergency = intValue
    //     }
    //   }
    // }
  }
}
